<template>
  <div style="flex:1; " class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
       <div novalidate class="form-inline" partial>
         <div class="form-group">
           <v-select id="f_meter_brand"
             v-model="model.f_meter_brand"
             placeholder='气表品牌'
             :value.sync="model.f_meter_brand"
             :options='$parent.$parent.brand'
             close-on-select >
           </v-select>
         </div>
         <!-- <div class="form-group">
           <v-select
             :value.sync="model.f_meter_style"
             v-model="model.f_meter_style"
             :options='model.f_meter_brand[0].gasmodel'
             placeholder='气表型号'
             close-on-select>
           </v-select>
         </div> -->
         <div class="form-group">
           <input  type="text" class="form-control" v-model="model.f_manufacturers" placeholder='气表厂家'
           condition="f_manufacturers = '{}'" v-next-el="cx" v-el:qbcj
           :size="model.f_meter_brand ? model.f_meter_brand.length*2 : 4">
         </div>
         <div class="form-group">
           <button class="btn btn-success width-100" @click="$parent.$parent.search()" v-el:cx id="comprehen-gasBra-gasBraLis-查询">查询</button>
         </div>
         <div class="form-group">
           <button class="btn btn-success width-100" @click="$parent.$parent.add()" id="comprehen-gasBra-gasBraLis-新增气表">新增气表</button>
         </div>
       </div>
      </criteria>
      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
             <th>气表品牌</th>
             <th>气表厂家</th>
             <th>气表类型</th>
             <th>报警气量</th>
             <th>充值上限</th>
             <th>透支额度</th>
             <th>别名</th>
             <th>使用户数</th>
             <th>操作</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_meter_brand}}</td>
            <td style="text-align:center">{{row.f_manufacturers}}</td>
            <td style="text-align:center">{{row.f_meter_type}}</td>
            <td style="text-align:center">{{row.f_police_gas}}</td>
            <td style="text-align:center">{{row.f_topup_ceil}}</td>
            <td style="text-align:center">{{row.f_overdr_lines}}</td>
            <td style="text-align:center">{{row.f_alias}}</td>
            <td style="text-align:center">{{row.counts}}</td>
            <td style="text-align:center">
              <button class="btn btn-link " @click.stop="$parent.$parent.$parent.del(row.id)" v-if="row.counts === 0"> 删除 </button>
              <!-- <button class="btn btn-link " @click.stop="$parent.$parent.$parent.modify(row)"> 修改 </button> -->
            </td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
/**
*阶梯气价查询列表
*/
import { PagedList } from 'vue-client'
import AppData from '../../../../stores/AppData'
export default {
  data () {
    return {
      isChange: false,
      // model: new PagedList('rs/sql/singleTable_OrderBy', 20,
      //  {items: '"' + this.items + '"', tablename: '"' + this.tablename + '"', orderitem: '"' + this.orderitem + '"'})
      model: new PagedList('rs/sql/getBrands', 20)
    }
  },
  props: {
    items: {
      type: String,
      default: '*'
    },
    tablename: {
      type: String,
      default: 't_gasbrand'
    },
    orderitem: {
      type: Number,
      default: 'id'
    },
    row: {}
  },
  ready () {
    this.search()
  },
  methods: {
    selfSearch (args) {
      if (args.model.f_meter_brand.length > 0) {
        if (args.model.f_meter_brand[0].f_meter_brand) {
          args.condition = `${args.condition} and f_meter_brand = '${args.model.f_meter_brand[0].f_meter_brand}'`
        }
      }
      // if (args.model.f_meter_brand.length > 0 && args.model.f_meter_style.length > 0) {
      //   if (args.model.f_meter_brand[0].f_meter_brand) {
      //     args.condition = `${args.condition} and f_meter_brand = '${args.model.f_meter_brand[0].f_meter_brand}'
      //     and f_meter_style = '${args.model.f_meter_style[0].f_meter_style}'`
      //   }
      // } else if (args.model.f_meter_brand.length > 0 && !args.model.f_meter_style.length > 0) {
      //   if (args.model.f_meter_brand[0].f_meter_brand) {
      //     args.condition = `${args.condition} and f_meter_brand = '${args.model.f_meter_brand[0].f_meter_brand}'`
      //   }
      // } else if (!args.model.f_meter_brand.length > 0 && args.model.f_meter_style.length > 0) {
      //   if (args.model.f_meter_brand[0].f_meter_brand) {
      //     args.condition = `${args.condition} and f_meter_style = '${args.model.f_meter_style[0].f_meter_style}'`
      //   }
      // }
      this.model.search(args.condition, args.model)
    },
    search () {
      this.$dispatch('search')
    },
    add () {
      this.$dispatch('add')
    },
    del (id) {
      this.$showMessage('确认删除吗?', ['confirm', 'cancel']).then(
        (response) => {
          if (response === 'confirm') {
            this.transfer(id)
          } else if (response === 'cancel') {
            this.$dispatch('cancel')
          }
        })
    },
    transfer (id) {
      this.$LogicService.delGasBrand(id)
        .then(
          (res) => {
            this.$dispatch('success', '气表品牌删除', this.data, res)
          }
        ).catch(
          (error) => {
            this.$dispatch('error', '气表品牌删除', this.data, error)
          }
        )
    }
  },
  watch: {
    'model.rows.length' (val) {
      if (val === 1) {
        this.$refs.paged.$refs.grid.select(this.model.rows[0])
      }
    }
  },
  computed: {
    brand () {
      return [{label: '全部', value: {f_meter_brand: '', gasmodel: [{label: '全部', value: {f_meter_style: ''}}]}}, ...AppData.getGasbrand()]
    }
  }
}
</script>
